<template>
  <yd-layout>
    <v-header slot="navbar" :title="title">
      <router-link to="/" slot ="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </router-link>
    </v-header>
    <yd-tab v-model="activeIndex">
      <yd-tab-panel :label = "item.title" v-for="(item, index) in tabLi" :key="index" class = "trial">
        <box bgImg = "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg" prop="113:384"></box>
        <div class="comm">
          <div class="flex middle comm_li" v-for = "(item, index) in commLi" :key = "`0${index}`">
            <box :bgImg = "item.imgSrc" class = "comm_logo"></box>
            <div class="comm_con">
              <p class = "title"><span>{{ item.source }}</span> <span>{{ item.commName }}</span><span>{{ item.capacity }}</span><span>{{ item.weight }}</span></p>
              <p class = 'desc'>兑换：<span>{{ item.integral + item.price }}</span></p>
              <p>市场价： <span>{{ item.originalPrice }}</span></p>
            </div>
            <div class="text-right comm_time">
              <p class = "time primary">限{{ item.limit }}件</p>
              <yd-button type="primary" v-if="type === 'all'">申请试用</yd-button>
            </div>
          </div>
        </div>
      </yd-tab-panel>
    </yd-tab>
  </yd-layout>
</template>
<script>
export default {
  name: 'trial-home',
  data () {
    return {
      activeIndex: 0,
      tabLi: [],
      commLi: []
    }
  },
  watch: {
    activeIndex: {
      immediate: true,
      handler (val) {
        this.init(val)
      }
    }
  },
  computed: {
    type () {
      return this.$route.params.type
    },
    title () {
      if (this.type === 'all') {
        return '全部试用'
      } else if (this.type === 'hist') {
        return '历史试用'
      }
    }
  },
  methods: {
    init (val) {
      this.tabLi = [{
        title: '全部'
      }, {
        title: '分类1'
      }, {
        title: '分类2'
      }]
      this.commLi = [{
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '￥66.90',
        originalPrice: '96.90',
        limit: '2'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '66.90',
        originalPrice: '96.90',
        limit: '2'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '66.90',
        originalPrice: '96.90',
        limit: '2'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '66.90',
        originalPrice: '96.90',
        limit: '2'
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
  .trial{
    padding: $padding;
    box-sizing: border-box;
    .comm{
      background-color: #fff;
      overflow: hidden;
      .comm_li{
        margin: .1rem 0;
        padding: .1rem;
        background-color: #eee;
        .comm_logo{
          width: 1.44rem;
        }
        .comm_con{
          padding-left:$large-padding;
          box-sizing: border-box;
          flex: 3;
          .title{
            span{
              margin-right: .1rem;
            }
          }
          .desc{
            margin: .1rem 0;
          }
        }
        .comm_time{
          flex: 2;
          box-sizing: border-box;
          .time{
            margin-bottom: .5rem;
          }
        }
      }
    }
  }
</style>
